<template>
  <div id="AppDetail">
    <a-card>
      <a-row style="margin-bottom: 16px">
        <a-col flex="auto">
          <h2>{{ data.appName }}</h2>
          <p>{{ data.appDesc }}</p>
          <p>应用类型:{{ APP_TYPE_MAP[data.appType] }}</p>
          <p>评分策略:{{ APP_SCORING_STRATEGY_MAP[data.scoringStrategy] }}</p>
          <a-space
            >作者:
            <div
              :style="{
                display: 'flex',
                alignItems: 'center',
                color: '#1D2129',
              }"
            >
              <a-avatar
                :size="24"
                :image-url="data.user?.userAvatar"
                :style="{ marginRight: '8px' }"
              >
                A
              </a-avatar>
              <a-typography-text
                >{{ data.user?.userName ?? "无名" }}
              </a-typography-text>
            </div>
          </a-space>

          <p>
            创建时间:
            {{ dayjs(data.createTime).format("YYYY-MM-DD HH:ss:mm") }}
          </p>
          <a-space size="medium">
            <a-button type="primary" :href="`/answer/do/${id}`"
              >开始答题
            </a-button>
            <a-button @click="doShare">分享应用</a-button>
            <a-button v-if="isMy" :href="`/add/question/${props.id}`"
              >设置题目
            </a-button>
            <a-button v-if="isMy" :href="`/add/scoring_result/${id}`"
              >设置评分
            </a-button>
            <a-button v-if="isMy" :href="`/add/app/${id}`">修改应用</a-button>
          </a-space>
        </a-col>

        <a-col flex="320px">
          <a-image width="100%" :src="data.appIcon"></a-image>
        </a-col>
      </a-row>
    </a-card>
  </div>
  <ShareModel :link="shareLink" title="应用分享" ref="sharModelRef" />
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  watchEffect,
  withDefaults,
  defineProps,
  computed,
} from "vue";
import API from "@/api";
import AppCard from "@/components/AppCard.vue";
import {
  getAppVoByIdUsingGet,
  listAppVoByPageUsingPost,
} from "@/api/appController";
import message from "@arco-design/web-vue/es/message";
import {
  APP_SCORING_STRATEGY_MAP,
  APP_TYPE_MAP,
  REVIEW_STATUS_ENUM,
} from "@/constant/app";
import { useRouter } from "vue-router";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";
import { useLoginUserStore } from "@/store/userStore";
import component from "*.vue";
import ShareModel from "@/components/ShareModel.vue"; // @ is an alias to /src
const router = useRouter();

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  },
});

const data = ref<API.AppVO>({});

//获取用户信息
const loginUserStore = useLoginUserStore();
const loinUserId = loginUserStore.loginUser?.id;
const isMy = computed(() => {
  return loinUserId && loinUserId === data.value.userId;
});
/**
 * 加载数据
 */
const loadData = async () => {
  if (!props.id) {
    return;
  }

  const res = await getAppVoByIdUsingGet({
    id: props.id,
  });
  if (res.data.code === 0) {
    data.value = res.data.data;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

watchEffect(() => {
  loadData();
});

//分享弹窗的引用
const sharModelRef = ref();
//分享链接
const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.id}`;

//分享
const doShare = (e: Event) => {
  if (sharModelRef.value) {
    sharModelRef.value.openModal();
  }
  // 阻止事件冒泡
  e.stopPropagation();
};
</script>
<style scoped>
.searchBr {
  margin-bottom: 28px;
  text-align: center;
}

.list-demo-action-layout .image-area {
  width: 183px;
  height: 119px;
  overflow: hidden;
  border-radius: 2px;
}

.list-demo-action-layout .list-demo-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}
</style>
